<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 1.引入JS 路由需要依赖vue 注意顺序-->
    <title>测试Vue路由</title>
    <script src="../vue/vue.js"> </script>
    <script src="../vue/vue-router.js"> </script>
</head>

<body>
    <!-- 2.准备数据渲染区 -->
    <div id="app">
        <!-- 3.4使用路由 将HTML解析成a标签,还有href属性-->
        <router-link to="/home">主页</router-link>
        <router-link to="/help">帮助</router-link>
        <!-- 3.5展示匹配成功后的结果 -->
        <router-view></router-view>
    </div>
    <!-- 3.准备路由功能 -->
    <script>
        //3.3定义组件
        let home = {
            template: "<h3>这是主页</h3>"
        }
        let help = {
            template: "<h3>这是帮助页</h3>"
        }
        //3.2创建路由对象VueRouter
        let router = new VueRouter({
            //属性名：指定多个请求和组件的匹配关系
            routes: [{
                    path: '/home',
                    component: home
                },
                {
                    path: '/help',
                    component: help
                }
            ]
        })
        //3.1通过router属性指定路由功能
        new Vue({
            el: "#app",
            //3.1通过router属性指定路由功能
            //router:router//指定路由
            router:router //key和value一样的话，可以直接简写为一个：router
        })
    </script>
</body>

</html>